<template>
  <div class="center">
    <div class="search clearfix">
      <Search @childFn="parentFn" />
      <el-select
        v-model="siteNo"
        placeholder="请选择站点"
        style="width: 200px; margin-right: 10px"
      >
        <el-option
          v-for="item in sitelist"
          :label="item.siteName"
          :key="item.index"
          :value="item.siteNo"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="sub">查询</el-button>
    </div>
    <div class="bar_box">
      <div class="select_box">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          style="margin-left: 20px"
        >
          <el-tab-pane v-for="item in arr2" :key="item.key" :label="item">
          </el-tab-pane>
        </el-tabs>
        <el-tabs v-model="activeName1" class="choose" @tab-click="handleClick1">
          <el-tab-pane
            v-for="item in arr3"
            :key="item.key"
            :label="item.aisleName"
          >
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div id="heatchart" class="heatchart">
      <Left v-bind:message="sidemsg"></Left>
      <div class="label" v-if="isshow">
        <div class="product clearfix">
          <span class="txt">历史温度曲线图</span>
          <span class="time"></span>
        </div>
        <div class="channt clearfix">
          <span>通道:</span>&nbsp;
          <b class="b1"></b>
          <span>_</span>
          <b class="b2"></b>&nbsp; <span>温度:</span>&nbsp;
          <b class="b3"></b>
        </div>
        <div class="echart"></div>
      </div>
      <Bottom v-bind:tablemessage="tablemsg"></Bottom>
    </div>
  </div>
</template>
<script>
import * as THREE from "three";
import Stats from "stats-js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import Search from "../../common/select";
import Left from "../../components/3dLeft";
import Bottom from "../../components/3dBottom";
export default {
  components: {
    Search,
    Left,
    Bottom,
  },
  data() {
    return {
      message: {},
      sidemsg: {},
      tablemsg: [],
      isshow: "true",
      sitelist: [],
      area: [],
      site: [],
      num: "",
      activeName: "",
      activeName1: "",
      warehouseExtent: "",
      cabinetExtent: "",
      lineExtent: "",
      list: [],
      arr2: ["电池仓", "充电柜", "线槽"],
      arr3: [],
      grouparr: [], //三维图材质对象的集合
      $chart: "",
      passageway: "1", //通道
      stationInfo: [],
      stationID: "",
      channel: "",
      dot: "",
      staList: [],
      dataTempList: [], //实时温度集合
      intervalList: [], //定时器集合
      selectObject: null, //当前选中的温度点
      lastObject: {
        //上一次选中的温度点
        flag: false,
      },
      selectChannel: [], //选中通道
      material: null, //默认材质
      material1: null,
      materialSelect: null, //当前选中点材质
      materialStaioncustom: null,
      materialTwinkle2: null,
      materialTwinkle3: null,
      materialStaion: null, //电池仓模型
      cylinderMesh: null, //圆柱通道点
      indexs: 0, //温度点序号
      passagewayTemp: 0, //通道温度点
      scene: null,
      camera: null,
      renderer: null,
      orbitControls: null,
      clock: null,
      controls: {
        scene: null,
        camera: null,
        renderer: null,
        rotationSpeed: 0.02,
        bouncingSpeed: 0.03,
        stats: null,
      },
      geometryModel: null, ////模型组合
      meshGroupList: [], //模型组合集合
      groupModel: null, //通道模型集合
      groupTempDot: null, //温度点集合
      activity: true, //页面是否活动,是否循环渲染renderScene
      timeOut: null,
      // faultList: [], //告警列表
      intervelTime: "", //定时器
      option: {
        backgroundColor: "transparent",
        grid: {
          left: "10%",
          top: "10%",
          bottom: "15%",
          right: "10%",
        },
        tooltip: {
          trigger: "axis",
        },
        yAxis: [
          {
            type: "value",
            position: "left",
            nameTextStyle: {
              color: "#00FFFF",
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgba(135,140,147,0.8)",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter: "{value}",
              color: "#fff",
              fontSize: 14,
            },
          },
        ],
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#133579",
                width: 2,
              },
            },
            splitArea: {
              color: "#f00",
              lineStyle: {
                color: "#f00",
              },
            },
            axisLabel: {
              color: "#fff",
              show: true,
              interval: 60,
              formatter: function (value) {
                var res = value;
                if (res.length > 7) {
                  res = res.substring(10);
                }
                return res;
              },
            },
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            data: [],
          },
        ],
        series: [
          {
            symbolSize: 0,
            type: "line",
            data: [],
            itemStyle: {
              normal: {
                borderWidth: 5,
                color: "#0696f9",
              },
            },
          },
        ],
      },
    };
  },
  created() {
    this.sub();
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    //接收子组件传的省市区对象
    parentFn(payload) {
      this.message = payload;
    },
    //查询
    sub() {
      this.getchannel();
      this.getsitemessage();
      this.gettable();
    },
    //获取站点列表
    getsitelist() {
      this.$http
        .post("/site/device/select", {})
        .then((res) => {
          if (res.data.h.code == 0) {
            this.sitelist = res.data.b;
          }
        })
        .catch((err) => {});
    },
    //获取所有通道数据
    getchannel() {
      let siteId = this.siteNo || "000002";
      this.$http.get(`/site/device/siteAisles/${siteId}`).then((res) => {
        if (res.data.h.code == 0) {
          this.arr2 = ["电池仓", "充电柜", "线槽"];
          this.warehouseExtent =
            res.data.b.warehouse[res.data.b.warehouse.length - 1].index;
          this.cabinetExtent =
            res.data.b.cabinet[res.data.b.cabinet.length - 1].index;
          this.lineExtent = res.data.b.line[res.data.b.line.length - 1].index;
          this.arr2[0] =
            this.arr2[0] +
            "(" +
            res.data.b.warehouse[0].index +
            "~" +
            `${this.warehouseExtent}` +
            ")";
          this.arr2[1] =
            this.arr2[1] +
            "(" +
            res.data.b.cabinet[0].index +
            "~" +
            `${this.cabinetExtent}` +
            ")";
          this.arr2[2] =
            this.arr2[2] +
            "(" +
            res.data.b.line[0].index +
            "~" +
            `${this.lineExtent}` +
            ")";
          this.list = res.data.b.warehouse.concat(
            res.data.b.cabinet,
            res.data.b.line
          );
          this.setarr();
        }
      });
    },
    //获取三维图左侧框数据
    getsitemessage() {
      let sitenum = this.siteNo || "000002";
      this.$http
        .get(`/redis/siteMaxTemp/${sitenum}`)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.sidemsg = res.data.b;
          }
        })
        .catch((err) => {});
    },
    //获取告警列表数据
    gettable() {
      let sitenum = this.siteNo || "000002";
      this.$http
        .post(`/site/alarm/tempWarning/${sitenum}`)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.tablemsg = res.data.b;
          }
        })
        .catch((err) => {});
    },
    timeChange(val) {
      this.gettemp(val);
    },
    setarr() {
      this.arr3 = this.list.slice(0, Number(this.warehouseExtent));
    },
    handleClick(tab) {
      if (tab.label.includes("电池仓")) {
        this.arr3 = this.list.slice(0, Number(this.warehouseExtent));
      }
      if (tab.label.includes("充电柜")) {
        this.arr3 = this.list.slice(
          Number(this.warehouseExtent),
          Number(this.cabinetExtent)
        );
      }
      if (tab.label.includes("线槽")) {
        this.arr3 = this.list.slice(
          Number(this.cabinetExtent),
          Number(this.lineExtent)
        );
      }
    },
    handleClick1(tab) {
      this.grouparr = this.groupModel.children;
      for (let i = 0; i < this.grouparr.length; i++) {
        this.grouparr[i].material = new THREE.MeshBasicMaterial({
          color: 0xc0c0c0,
          transparent: false,
          opacity: 1,
        });
        let index;
        this.list.map((item) => {
          if (tab.label == item.aisleName) {
            index = item.index;
          }
        });
        if (this.grouparr[i].name.split("_")[1] == index) {
          this.grouparr[i].material = new THREE.MeshBasicMaterial({
            color: 0xa52a2a,
            transparent: false,
            opacity: 1,
          });
        }
      }
    },
    initbox() {
      this.$chart = this.$echarts.init(document.querySelector(".echart"));
    },
    initbar() {},
    init() {
      let self = this;
      self.initScene(); // 场景
      self.initCamera(); //添加一个透视相机
      self.initRenderer(); // 渲染器
      self.initLight(); //光源
      self.initControls(); // 轨道控制器(旋转)
      self.initStats(); //性能监视器Stats
      // self.initGUI(); //调试组件
      self.renderScene(); //循环渲染场景
      self.initContent(); //初始化模型
      self.initSky();
    },
    // 场景
    initScene: function () {
      let self = this;
      window.THREE = THREE;
      self.scene = new THREE.Scene();
      window.scene = self.scene;
    },
    // 相机
    initCamera: function () {
      let self = this;
      self.camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1,
        10000
      );
      self.camera.position.set(-600, 600, 2000);
      self.camera.lookAt(new THREE.Vector3(0, 0, 0)); //让相机指向原点
    },
    // 渲染器
    initRenderer: function () {
      let self = this;
      self.renderer = new THREE.WebGLRenderer({
        antialias: true,
      });
      var width = this.$("#heatchart").width();
      var height = this.$("#heatchart").height();
      self.renderer.setSize(width, height);
      //设置近乎白色的透明颜色（默认为黑色）
      self.renderer.setClearColor(0xffffff);
      this.$("#heatchart").append(self.renderer.domElement);
    },
    //给场景添加光源
    initLight: function () {
      let self = this;
      //自然光
      var ambientLight = new THREE.AmbientLight(0x606060);
      self.scene.add(ambientLight);
      //平行光源
      var directionalLight = new THREE.DirectionalLight(0xffffff);
      directionalLight.position.set(1, 0.75, 0.5).normalize();
      self.scene.add(directionalLight);
    },
    // 初始化轨迹球控件
    initControls: function () {
      let self = this;
      self.orbitControls = new OrbitControls(
        self.camera,
        self.renderer.domElement
      );
      //控制焦点
      self.orbitControls.target = new THREE.Vector3(0, 0, 0);
      // 使动画循环使用时阻尼或自转 意思是否有惯性
      self.orbitControls.enableDamping = false;
      //是否可以缩放
      self.orbitControls.enableZoom = true;
      //是否自动旋转
      self.orbitControls.autoRotate = true;
      //设置相机距离原点的最进距离
      self.orbitControls.minDistance = 1000;
      //设置相机距离原点的最远距离
      self.orbitControls.maxDistance = 2000;
      //是否开启右键拖拽
      self.orbitControls.enablePan = true;
      self.clock = new THREE.Clock(); //用于更新轨道控制器
    },
    //性能监视器Stats
    initStats: function () {
      //FPS表示：上一秒的帧数，这个值越大越好，一般都为60左右。
      //MS表示渲染一帧需要的毫秒数，这个数字是越小越好
      let self = this;
      self.stats = new Stats();
      self.stats.domElement.style.position = "absolute";
      self.stats.domElement.style.left = "0px";
      self.stats.domElement.style.top = "0px";
      this.$("#heatchart").append(self.stats.domElement);
    },
    //调试组件
    initGUI: function () {
      // let self = this;
      const gui = new dat.GUI({
        autoPlace: false,
      });
      gui.domElement.style.position = "absolute";
      gui.domElement.style.top = "0px";
      gui.domElement.style.right = "0px";
      this.$("#heatchart").append(gui.domElement);
    },
    //循环渲染场景
    renderScene: function () {
      let { scene, camera, renderer, stats, activity } = this;
      var skip = new Date().getSeconds(); //跳帧设置
      stats.update();
      if (activity) {
        requestAnimationFrame(this.renderScene);
        renderer.render(scene, camera);
        // if (skip % 2 !== 0) {
        //   renderer.render(scene, camera);
        //   return;
        // }
        // console.log("渲染中");
      }
    },

    //清空渲染器缓存
    clearRenderer: function () {
      this.renderer.dispose();
      this.renderer.forceContextLoss();
      // this.renderer.context = null;//报错
      this.renderer.domElement = null;
      this.renderer = null;
    },
    /// 清空当前obj对象的缓存object object3D对象或mesh对象
    clearCache: function (object) {
      let mesh = object;
      mesh.geometry.dispose();
      mesh.material.dispose();
    },
    initSky() {
      let urls = ["", "", "", "", "", ""];
      let materials = [];
      urls.some((url) => {
        let texture = new THREE.TextureLoader().load(
          require("../../assets/img/sky-img.png"),
          (load) => {},
          (progress) => {},
          (err) => {
            console.log(err);
          }
        );
        materials.push(
          new THREE.MeshBasicMaterial({
            map: texture,
            side: THREE.BackSide,
          })
        );
      });
      let cube = new THREE.Mesh(
        new THREE.CubeGeometry(9000, 9000, 9000),
        materials
      );
      cube.name = "sky";
      this.scene.add(cube);
    },
    //初始化模型
    initContent: function () {
      let self = this;
      // 地板
      var mesh = new THREE.Mesh(
        new THREE.PlaneBufferGeometry(2000, 2000),
        new THREE.MeshBasicMaterial({
          color: 0xc3c3c3,
        })
      );
      mesh.rotation.x = -Math.PI / 2;
      mesh.receiveShadow = true;
      // self.scene.add(mesh);

      //添加地板割线
      // var grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);
      // grid.material.opacity = 0.2;
      // grid.material.transparent = true;
      // self.scene.add(grid);

      // //控制室,充电柜,丛机,桌子,吹风机,工具柜
      self.initFrame();
      //底部通道
      self.initPassagewayTransverse();
      //竖型通道
      self.initPassagewayVertical();
      //电池仓和测温点
      self.initBattery();
      //充电柜温度点,线槽温度点
      self.initChest();

      //通道模型组添加到场景
      self.scene.add(self.groupModel);
      // // //测温点模型组添加到场景
      self.scene.add(self.groupTempDot);

      addEventListener("click", self.onMouseDblclick, false); // 鼠标双击触发的方法
      addEventListener("resize", self.onWindowResize, false); //窗口变动触发的方法
      addEventListener("keydown", self.onKeyDown, false); //键盘按下触发的方法
    },

    // 控制室
    initFrame: function () {
      let self = this;
      var mesh2 = new THREE.Mesh(
        new THREE.CubeGeometry(10, 500, 10, 1, 1),
        self.material1
      );
      var mesh3 = new THREE.Mesh(
        new THREE.CubeGeometry(10, 800, 10, 1, 1),
        self.material1
      );
      var mesh4 = new THREE.Mesh(
        new THREE.CubeGeometry(10, 1800, 10, 1, 1),
        self.material1
      );

      for (var a = 0; a < 2; a++) {
        for (var b = 0; b < 2; b++) {
          var box1 = mesh2.clone();
          box1.position.set(a * 950 - 900, 250, b * 800 - 400);
          box1.updateMatrix();
          self.geometryModel.merge(box1.geometry, box1.matrix);

          var box2 = mesh2.clone();
          box2.position.set(a * 400 + 500, 250, b * 800 - 400);
          box2.updateMatrix();
          self.geometryModel.merge(box2.geometry, box2.matrix);

          var box3 = mesh3.clone();
          box3.position.set(a * 950 - 900, b * 500, 0);
          box3.rotateX((90 * Math.PI) / 180);
          box3.updateMatrix();
          self.geometryModel.merge(box3.geometry, box3.matrix);

          var box4 = mesh4.clone();
          box4.position.set(0, a * 500, b * 800 - 400);
          box4.rotateZ((90 * Math.PI) / 180);
          box4.updateMatrix();
          self.geometryModel.merge(box4.geometry, box4.matrix);

          var box5 = mesh3.clone();
          box5.position.set(a * 400 + 500, b * 500, 0);
          box5.rotateX((90 * Math.PI) / 180);
          box5.updateMatrix();
          self.geometryModel.merge(box5.geometry, box5.matrix);
        }
      }

      // C室桌子
      for (let c = 0; c < 2; c++) {
        for (let d = 0; d < 2; d++) {
          var mesh = new THREE.Mesh(
            new THREE.CubeGeometry(5, 120, 5, 1, 1),
            self.material1
          );
          mesh.position.set(c * 300 + 550, 50, d * 120 - 350);
          mesh.updateMatrix();
          self.geometryModel.merge(mesh.geometry, mesh.matrix);
        }
      }
      var mesh5 = new THREE.Mesh(
        new THREE.CubeGeometry(310, 150, 5, 1, 1),
        self.material1
      );
      mesh5.position.set(700, 110, -300);
      mesh5.rotateX((90 * Math.PI) / 180);
      mesh5.updateMatrix();
      self.geometryModel.merge(mesh5.geometry, mesh5.matrix);

      // // B室工具柜
      // var mesh6 = new THREE.Mesh(new THREE.CubeGeometry(120, 500, 50, 1, 1), self.material);
      // mesh6.position.set(120, 250, -350);
      // mesh6.updateMatrix();
      // self.geometryModel.merge(mesh6.geometry, mesh6.matrix);

      // // B室吹风机
      // var mesh7 = new THREE.Mesh(new THREE.CubeGeometry(50, 500, 120, 1, 1), self.material);
      // mesh7.position.set(460, 250, -300);
      // mesh7.updateMatrix();
      // self.geometryModel.merge(mesh7.geometry, mesh7.matrix);

      //从机服务器↓
      var mesh8 = new THREE.Mesh(
        new THREE.CubeGeometry(50, 20, 50, 1, 1),
        self.material1
      );
      var position = [
        [250, -250],
        [-400, -250],
        [-850, -20],
        [-400, 250],
      ];
      for (let e = 0; e < 4; e++) {
        let box6 = mesh8.clone();
        box6.position.set(position[e][0], 10, position[e][1]);
        box6.updateMatrix();
        self.geometryModel.merge(box6.geometry, box6.matrix);
      }

      // 充电机柜↓
      var mesh9 = new THREE.Mesh(
        new THREE.CubeGeometry(4, 500, 10, 1, 1),
        self.material1
      );
      var mesh10 = new THREE.Mesh(
        new THREE.CubeGeometry(4, 4, 250, 1, 1),
        self.material1
      );
      var mesh11 = new THREE.Mesh(
        new THREE.CubeGeometry(200, 4, 4, 1, 1),
        self.material1
      );
      for (let f = 0; f < 2; f++) {
        for (let g = 0; g < 2; g++) {
          // A室
          let box7 = mesh9.clone();
          box7.position.set(-700, 250, f * 550 - 400 + g * 250);
          box7.updateMatrix();
          self.geometryModel.merge(box7.geometry, box2.matrix);
          let box8 = mesh10.clone();
          box8.position.set(-700, f * 500, g * 540 - 270);
          box8.updateMatrix();
          self.geometryModel.merge(box8.geometry, box8.matrix);
          let box9 = mesh11.clone();
          box9.position.set(-800, f * 500, g * 300 - 150);
          box9.updateMatrix();
          self.geometryModel.merge(box9.geometry, box9.matrix);

          // //B室
          var box10 = mesh9.clone();
          box10.position.set(f * 200 + 50, 250, g * 250 + 150);
          box10.updateMatrix();
          self.geometryModel.merge(box10.geometry, box10.matrix);

          //C室
          var box11 = mesh9.clone();
          box11.position.set(f * 200 + 700, 250, g * 250 + 150);
          box11.updateMatrix();
          self.geometryModel.merge(box11.geometry, box11.matrix);
        }
        //A室
        // var box12 = mesh9.clone();
        // box12.position.set((-900, 250, f * 300) - 150);
        // box12.updateMatrix();
        // self.geometryModel.merge(box12.geometry, box12.matrix);

        //B室
        // var box13 = mesh10.clone();
        // box13.position.set(250, (f * 500), 270);
        // box13.updateMatrix();
        // self.geometryModel.merge(box13.geometry, box13.matrix);
        // var box14 = mesh11.clone();
        // box14.position.set(150, (f * 500), 150);
        // box14.updateMatrix();
        // self.geometryModel.merge(box14.geometry, box14.matrix);

        //C室
        var box15 = mesh10.clone();
        box15.position.set(700, f * 500, 270);
        box15.updateMatrix();
        self.geometryModel.merge(box15.geometry, box15.matrix);
        var box16 = mesh11.clone();
        box16.position.set(800, f * 500, 150);
        box16.updateMatrix();
        self.geometryModel.merge(box16.geometry, box16.matrix);
      }
      // 充电机柜↑
      self.meshGroupList = new THREE.Mesh(self.geometryModel, self.material1);
      self.scene.add(self.meshGroupList);
    },

    //底部通道
    initPassagewayTransverse: function () {
      let self = this;
      var mech2 = new THREE.Mesh(
        new THREE.CubeGeometry(650, 5, 5, 32),
        self.material1
      );
      for (var h = 0; h < 2; h++) {
        for (var i = 0; i < 2; i++) {
          var box2 = mech2.clone();
          box2.position.set(-350, 10, h * 160 + (i * 510 - 330));
          box2.name = "channel_" + (h * 1 + i * 2 + 53);
          self.groupModel.add(box2);
        }
      }

      var curve = new THREE.CatmullRomCurve3(
        [
          new THREE.Vector3(80, 0, 140),
          new THREE.Vector3(110, 0, -240),
          new THREE.Vector3(180, 0, -290),
          new THREE.Vector3(480, 0, -300),
        ],
        false
      );
      var curve2 = new THREE.CatmullRomCurve3(
        [
          new THREE.Vector3(140, 0, 140),
          new THREE.Vector3(160, 0, -180),
          new THREE.Vector3(300, 0, -200),
          new THREE.Vector3(480, 0, -200),
        ],
        false
      );

      // var tubeGeometry = new THREE.TubeGeometry(curve, 100, 2, 50, false);

      var tubeGeometry2 = new THREE.TubeGeometry(curve, 100, 3, 50, false);
      var tube2 = new THREE.Mesh(tubeGeometry2, self.material1); //材质可替换成流动materialww
      tube2.name = "channel_51";
      self.groupModel.add(tube2);

      var tubeGeometry3 = new THREE.TubeGeometry(curve2, 100, 3, 50, false);
      var tube3 = new THREE.Mesh(tubeGeometry3, self.material1); //材质可替换成流动materialww
      tube3.name = "channel_52";
      self.groupModel.add(tube3);
    },

    //竖型通道
    initPassagewayVertical: function () {
      let self = this;

      var geometry = new THREE.CubeGeometry(4, 500, 4, 32);
      var cylinder2 = new THREE.Mesh(geometry, self.material1);

      //线圈2↓
      var TorusGeometry = new THREE.TorusGeometry(20, 2, 30, 20, Math.PI * 2);
      var coilLine = new THREE.Mesh(TorusGeometry, self.material1);
      //线圈2↑

      //A室竖型通道
      //35-36通道
      for (var j = 0; j < 2; j++) {
        var box17 = cylinder2.clone();
        box17.position.set(-810, 250, -(j * 250) - 150);
        box17.name = "channel_" + (j + 35);
        self.groupModel.add(box17);
      }
      //43-44通道
      for (let k1 = 0; k1 < 2; k1++) {
        let box18 = cylinder2.clone();
        box18.position.set(-810, 250, k1 * 250 + 150);
        box18.name = "channel_" + (k1 + 43);
        self.groupModel.add(box18);
      }

      //B室竖型通道
      for (let l = 0; l < 2; l++) {
        let box19 = cylinder2.clone();
        box19.position.set(-(l * 200) + 250, 250, 300);
        box19.name = "channel_" + (l * 1 + 31);
        self.groupModel.add(box19);
      }
      //线圈通道A室
      for (var k = 0; k < 2; k++) {
        var num = 0,
          num2 = k * 8 + 37;
        for (let i = 0; i < 12; i++) {
          if (num == 4) {
            num = 0;
            num2++;
          }
          for (let j1 = 0; j1 < 2; j1++) {
            var box2_2 = coilLine.clone();
            box2_2.rotateX((90 * Math.PI) / 180);
            box2_2.position.set(-850, i * 35 + 40, j1 * 100 - 330 + k * 550);
            box2_2.name = "channel_" + num2 + "_" + num;
            self.groupModel.add(box2_2);
            num++;
          }
        }
      }
      //线圈通道B室
      var num1 = 0;
      for (let i1 = 0; i1 < 4; i1++) {
        if (i1 == 2) {
          num1 = 0;
        }
        for (let j2 = 0; j2 < 2; j2++) {
          var box2_3 = coilLine.clone();
          box2_3.rotateX((90 * Math.PI) / 180);
          box2_3.position.set(j2 * 70 + 120, i1 * 50 + 240, 300);
          box2_3.name = "channel_" + (i1 < 2 ? 33 : 34) + "_" + num1;
          self.groupModel.add(box2_3);
          num1++;
        }
      }
    },

    //电池仓
    initBattery: function () {
      let self = this;
      var tempSpotGeometry = new THREE.CubeGeometry(180, 10, 150, 1, 1);
      var tempSpotGround = new THREE.Mesh(
        tempSpotGeometry,
        self.materialStaion
      );

      // 平面 (1-4通道) ---B室电池点1
      for (var n = 0; n < 4; n++) {
        var sphereX = 280,
          sphereY = n * 120 + 100,
          sphereZ = -180;
        var box2 = tempSpotGround.clone();
        box2.position.set(sphereX, sphereY, sphereZ);
        box2.name = "channel_" + (n + 1);
        self.groupModel.add(box2);
        self.passagewayTemp += 1;
        self.Sphere(sphereX, sphereY + 5, sphereZ, self.passagewayTemp);
      }

      // 平面(5-16通道)---
      for (let i2 = 0; i2 < 3; i2++) {
        for (let j2 = 0; j2 < 4; j2++) {
          var sphereX1 = -(i2 * 220) - 130;
          var sphereY1 = j2 * 120 + 100;
          var sphereZ1 = -250;
          var box2_4 = tempSpotGround.clone();
          box2_4.position.set(sphereX1, sphereY1, sphereZ1);
          box2_4.name = "channel_" + (i2 * 4 + j2 * 1 + 5);
          self.groupModel.add(box2_4);
          self.passagewayTemp += 1;
          self.Sphere(sphereX1, sphereY1 + 5, sphereZ1, self.passagewayTemp);
        }
      }

      // 平面(17-28通道)---A室电池点2
      for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 4; j++) {
          var sphereX3 = -(i * 220) - 130;
          var sphereY3 = j * 120 + 100;
          var sphereZ3 = 300;
          var box2_5 = tempSpotGround.clone();
          box2_5.position.set(sphereX3, sphereY3, sphereZ3);
          box2_5.name = "channel_" + (i * 4 + j * 1 + 17);
          self.groupModel.add(box2_5);
          self.passagewayTemp += 1;
          self.Sphere(sphereX3, sphereY3 + 5, sphereZ3, self.passagewayTemp);
        }
      }

      // 平面 (29-30通道) ---B室电池点2
      for (let n = 0; n < 2; n++) {
        var sphereX2 = 380,
          sphereY2 = n * 120 + 300,
          sphereZ2 = 320;
        var box2_6 = tempSpotGround.clone();
        box2_6.position.set(sphereX2, sphereY2, sphereZ2);
        box2_6.name = "channel_" + (n + 29);
        self.groupModel.add(box2_6);
        self.passagewayTemp += 1;
        self.Sphere(sphereX2, sphereY2 + 5, sphereZ2, self.passagewayTemp);
      }
    },

    //热力图
    Sphere: function (sphereX, sphereY, sphereZ, passageway) {
      let self = this;
      var geometrySemicircle = new THREE.SphereGeometry(
        10,
        10,
        10,
        0,
        Math.PI * 2,
        0,
        Math.PI / 2
      );
      // var faceIndices = ['a', 'b', 'c'];
      for (var i = 0; i < geometrySemicircle.faces.length; i++) {
        var face = geometrySemicircle.faces[i];
        for (var j = 0; j < 3; j++) {
          // var vertexIndex = face[faceIndices[j]];
          // var point = geometrySemicircle.vertices[vertexIndex];
          var color = new THREE.Color(0x008000);
          face.vertexColors[j] = color;
        }
      }
      for (let i = 0; i < 4; i++) {
        for (var p = 0; p < 4; p++) {
          var spX = i * 40 + sphereX - 60;
          var spY = sphereY + 5;
          var spZ = 0;
          if (
            (passageway < 17 && i % 2 != 0) ||
            (passageway > 16 && i % 2 == 0)
          ) {
            spZ = p * 40 + sphereZ - 60;
          } else {
            spZ = -(p * 40) + sphereZ + 60;
          }
          //圆柱体
          var box3 = self.cylinderMesh.clone();
          box3.position.set(spX, spY, spZ);
          box3.rotateX((90 * Math.PI) / 180);
          box3.name = "passageway" + (self.indexs + 1);
          self.indexs++;
          box3.passageway = passageway;
          box3.index = i * 4 + p * 1 + 1;
          box3.tempNum = "-";
          box3.coordinate = spX + "," + spY + "," + spZ;
          self.groupTempDot.add(box3);
          //圆柱体
        }
      }
    },

    //充电柜温度点,线槽温度点
    initChest: function () {
      let self = this;
      // 竖型通道B室 (31-32通道)
      for (var i1 = 0; i1 < 2; i1++) {
        self.passagewayTemp += 1;
        for (var j1 = 0; j1 < 8; j1++) {
          var box3 = self.cylinderMesh.clone();
          box3.position.set(-(i1 * 200) + 250, j1 * 50 + 80, 300);
          box3.name = "passageway" + (self.indexs + 1);
          self.indexs++;
          box3.passageway = self.passagewayTemp;
          box3.index = j1 + 1;
          box3.tempNum = 0;
          box3.coordinate = -(i1 * 150) + 70 + "," + (j1 * 50 + 50) + "," + 300;
          self.groupTempDot.add(box3);
        }
      }
      // 线圈B室 (33-34通道)
      for (let i = 0; i < 4; i++) {
        if (i % 2 == 0) self.passagewayTemp += 1;
        for (let j = 0; j < 2; j++) {
          for (var k = 0; k < 2; k++) {
            var box3_1 = self.cylinderMesh.clone();
            var x = 0,
              y = 0,
              z = 0;
            if (i % 2 && j % 2) {
              x = j * 70 - 40;
              z = -(k * 45) + 370;
            } else if (i % 2 && j % 2 != 1) {
              x = j * 70 - 40;
              z = k * 45 + 325;
            } else if (i % 2 != 1 && j % 2) {
              x = -(j * 70) + 30;
              z = -(k * 45) + 370;
            } else if (i % 2 != 1 && j % 2 != 1) {
              x = j * 70 + 30;
              z = k * 45 + 325;
            }
            y = -(i * 50) + (i < 2 ? 290 : 490);
            box3_1.position.set(x + 160, y, z - 50);
            box3_1.rotateZ((90 * Math.PI) / 180);
            box3_1.coordinate =
              k * 70 - 40 + "," + (i * 40 + 240) + "," + (j * 45 + 325);
            box3_1.name = "passageway" + (self.indexs + 1);
            self.indexs++;
            box3_1.index =
              i < 2
                ? i * 4 + j * 2 + (k * 1 + 1)
                : i * 4 + j * 2 + (k * 1 + 1) - 8; //indexs += 1;
            box3_1.passageway = self.passagewayTemp;
            box3_1.tempNum = 0;
            self.groupTempDot.add(box3_1);
          }
        }
      }
      //  竖型通道A室1 (35-36通道)
      for (let i2 = 0; i2 < 2; i2++) {
        self.passagewayTemp += 1;
        for (let j2 = 0; j2 < 8; j2++) {
          var box20 = self.cylinderMesh.clone();
          box20.position.set(-810, j2 * 50 + 100, -(i2 * 250) - 150);
          box20.coordinate =
            -810 + "," + (j2 * 40 + 40) + "," + (i2 * 150 - 100);
          box20.name = "passageway" + (self.indexs + 1);
          self.indexs++;
          box20.index = j2 + 1; //indexs += 1;
          box20.passageway = self.passagewayTemp;
          box20.tempNum = 0;
          self.groupTempDot.add(box20);
        }
      }
      var number = 0;
      // 线圈A室1 (37-42通道)
      for (var m = 0; m < 12; m++) {
        if (m % 2 == 0) {
          self.passagewayTemp += 1;
          number = 0;
        }
        for (var n = 0; n < 2; n++) {
          number++;
          var box21 = self.cylinderMesh.clone();
          box21.position.set(-850, m * 35 + 40, n * 45 - 353);
          box21.rotateZ((90 * Math.PI) / 180);
          box21.coordinate = -860 + "," + (m * 25 + 50) + "," + (n * 45 - 83);
          box21.name = "passageway" + (self.indexs + 1);
          self.indexs++;
          box21.index = number;
          box21.passageway = self.passagewayTemp;
          box21.tempNum = 0;
          self.groupTempDot.add(box21);
        }
        for (var o = 0; o < 2; o++) {
          number++;
          var box22 = self.cylinderMesh.clone();
          box22.position.set(-850, m * 35 + 40, o * 45 - 253);
          box22.rotateZ((90 * Math.PI) / 180);
          box22.coordinate = -860 + "," + (m * 25 + 50) + "," + (o * 45 - 13);
          box22.name = "passageway" + (self.indexs + 1);
          self.indexs++;
          box22.index = number;
          box22.passageway = self.passagewayTemp;
          box22.tempNum = 0;
          self.groupTempDot.add(box22);
        }
      }

      //  竖型通道A室2 (43-44通道)
      for (var p = 0; p < 2; p++) {
        self.passagewayTemp += 1;
        for (var q = 0; q < 8; q++) {
          var box23 = self.cylinderMesh.clone();
          box23.position.set(-810, q * 50 + 100, p * 250 + 150);
          box23.coordinate = -810 + "," + (q * 40 + 40) + "," + (p * 150 + 250);
          box23.name = "passageway" + (self.indexs + 1);
          self.indexs++;
          box23.index = q + 1;
          box23.passageway = self.passagewayTemp;
          box23.tempNum = 0;
          self.groupTempDot.add(box23);
        }
      }
      number = 0;
      // 线圈A室2 (45-50通道)
      for (var r = 0; r < 12; r++) {
        if (r % 2 == 0) {
          self.passagewayTemp += 1;
          number = 0;
        }
        for (var s = 0; s < 2; s++) {
          number++;
          var box24 = self.cylinderMesh.clone();
          box24.position.set(-850, r * 35 + 40, s * 45 + 198);
          box24.rotateZ((90 * Math.PI) / 180);
          box24.coordinate = -860 + "," + (r * 25 + 50) + "," + (s * 45 + 265);
          box24.name = "passageway" + (self.indexs + 1);
          self.indexs++;
          box24.index = number;
          box24.passageway = self.passagewayTemp;
          box24.tempNum = 0;
          self.groupTempDot.add(box24);
        }
        for (var s1 = 0; s1 < 2; s1++) {
          number++;
          var box25 = self.cylinderMesh.clone();
          box25.position.set(-850, r * 35 + 40, s1 * 45 + 298);
          box25.rotateZ((90 * Math.PI) / 180);
          box25.coordinate = -860 + "," + (r * 25 + 50) + "," + (s1 * 45 + 335);
          box25.name = "passageway" + (self.indexs + 1);
          self.indexs++;
          box25.index = number;
          box25.passageway = self.passagewayTemp;
          box25.tempNum = 0;
          self.groupTempDot.add(box25);
        }
      }

      // 底部通道B室 (51-52通道)
      for (var u1 = 0; u1 < 2; u1++) {
        self.passagewayTemp += 1;
        for (var u2 = 0; u2 < 9; u2++) {
          var box26 = self.cylinderMesh.clone();
          box26.position.set(u1 * 50 + 85, 0, -(u2 * 30) + 100);
          box26.rotateX((90 * Math.PI) / 180);
          box26.coordinate = u1 * 50 - 50 + "," + 10 + "," + (-(u2 * 30) + 320);
          box26.name = "passageway" + (self.indexs + 1);
          self.indexs++;
          box26.index = u2 + 1;
          box26.passageway = self.passagewayTemp;
          box26.tempNum = 0;
          self.groupTempDot.add(box26);
        }
        for (var u3 = 0; u3 < 9; u3++) {
          var box27 = self.cylinderMesh.clone();
          box27.position.set(u3 * 35 + 180, 10, u1 * 100 - 300);
          box27.rotateZ((90 * Math.PI) / 180);
          box27.coordinate = u3 * 35 + 20 + "," + 10 + "," + (u1 * 80 + 10);
          box27.name = "passageway" + (self.indexs + 1);
          self.indexs++;
          box27.index = u3 + 10;
          box27.passageway = self.passagewayTemp;
          box27.tempNum = 0;
          self.groupTempDot.add(box27);
        }
      }

      // 底部通道A室1 (53-54通道)
      for (var v1 = 0; v1 < 2; v1++) {
        self.passagewayTemp += 1;
        for (var v = 0; v < 18; v++) {
          var box31 = self.cylinderMesh.clone();
          box31.position.set(v * 35 - 650, 10, v1 * 160 - 330);
          box31.rotateZ((90 * Math.PI) / 180);
          box31.coordinate = v * 60 - 730 + "," + 10 + "," + (v1 * 100 - 70);
          box31.name = "passageway" + (self.indexs + 1);
          self.indexs++;
          box31.index = v + 1;
          box31.passageway = self.passagewayTemp;
          box31.tempNum = 0;
          self.groupTempDot.add(box31);
        }
      }

      // 底部通道A室2 (55-56通道)
      for (var w = 0; w < 2; w++) {
        self.passagewayTemp += 1;
        for (var u = 0; u < 18; u++) {
          var box30 = self.cylinderMesh.clone();
          box30.position.set(u * 35 - 650, 10, w * 160 + 180);
          box30.rotateZ((90 * Math.PI) / 180);
          box30.coordinate = u * 60 - 730 + "," + 10 + "," + (w * 100 + 270);
          box30.name = "passageway" + (self.indexs + 1);
          self.indexs++;
          box30.index = u + 1; //indexs += 1;
          box30.passageway = self.passagewayTemp;
          box30.tempNum = 0;
          self.groupTempDot.add(box30);
        }
      }
    },
    //通道温度点切换
    onPassChange: function (item) {
      let self = this;
      self.passageway = item;
      self.selectBlock(item);
    },
    selectBlock: function (num) {
      let self = this;
      if (self.selectChannel.length != 0) {
        for (var i = 0; i < self.selectChannel.length; i++) {
          self.selectChannel[i].material =
            self.selectNum < 31 ? self.materialStaion : self.material;
        }
      }
      if (
        num == 33 ||
        num == 34 ||
        (num > 36 && num < 43) ||
        (num > 44 && num < 51)
      ) {
        self.selectChannel = [];
        for (var y = 0; y < 4; y++) {
          var obj = self.scene.getObjectByName("channel" + num + "_" + y); //获取这个方块
          obj.material = self.materialSelect;
          self.selectChannel.push(obj);
        }
      } else {
        self.selectChannel = [];
        var obj1 = self.scene.getObjectByName("channel" + num); //获取这个方块
        obj.material = self.materialSelect;
        self.selectChannel.push(obj1);
      }
      self.selectNum = num;
    },
    //实时温度
    onTempList: function () {
      let self = this;
      // this.$api.get(self.$utils.config.link7 + self.deviceNo, {
      // 		accounts: sessionStorage.getItem('accounts'),
      // 		token: sessionStorage.getItem('token'),
      // 		rolesStr: sessionStorage.getItem('rolesStr'),
      // 		stationList: sessionStorage.getItem("stationList"),
      // 	},
      // 	function(response) {
      // 		if (response.success == "true") {
      // 			self.dataTempList = response;
      self.onEchartData(1, 1);
      // 			self.onTempbinding();
      // 		}
      // 	}
      // )
    },
    //阈值判断增加闪烁温度点,增加告警列表
    onTempbinding: function () {
      let self = this;
      // var stationName = '';
      for (var i = 1; i <= 748; i++) {
        var objstar = self.scene.getObjectByName("passageway" + i); //获取这个方块

        if (objstar != undefined) {
          objstar.material = self.materialStaioncustom;
          objstar.tempNum = "-";
        }
      }

      //清除所有闪烁温度点定时器
      for (var name in self.intervalList) {
        clearInterval(self.intervalList[name]);
      }
      var dtlist = self.dataTempList.list[0];

      if (dtlist[1] != undefined) {
        // self.table.dataList = [];
        for (var z = 1; z < 57; z++) {
          var col = dtlist[z];
          var dian = 0;
          if (z >= 1 && z < 31) {
            dian = 16;
          } else if (z >= 31 && z < 51) {
            dian = 8;
          } else if (z >= 51 && z < 57) {
            dian = 18;
          }
          for (var j = 0; j < dian; j++) {
            var num = self.onNumber(i, j + 1);
            var obj = self.scene.getObjectByName("passageway" + num); //获取这个方块
            if (obj != undefined) {
              if ((i < 31 && col[j] >= 40) || (i > 30 && col[j] > 65)) {
                // var str = self.onZone(i); //返回通道编号（通道)
                // var leve = self.onFaultLeve(i, parseFloat(col[j])); //返回告警等级（通道,温度)

                //改用直接读取故障告警页面最新3分钟数据
                // var dt = {
                // 	'deviceNo': str,
                // 	'tempDot': obj.index,
                // 	'faultNum': col[j] + '℃',
                // 	'faultLeve': leve,
                // };
                // self.table.dataList.push(dt);

                //闪烁点
                var str2 = "timer" + num;
                self.onTwinkle(obj, str2);
              }
              if (col[j] != "") {
                obj.material = self.onMaterialColor(col[j], i);
              }
              obj.tempNum = col[j];
            }
          }
        }
      }
    },
    //区域最高温度
    onRegionMaxTemp: function () {
      let self = this;
    },
    //单个温度点历史温度
    onEchartData: function (num, spot) {
      let self = this;
      // if (self.dataTempList.list != undefined) {
      //   var dtlist = self.dataTempList.list[0];
      //   this.$(".channt .b1").text(num); //显示通道
      //   this.$(".channt .b2").text(spot); //显示点
      //   this.$(".channt .b3").text(dtlist[num][spot] + "℃"); //显示温度
      // }
      this.$(".label").css({
        display: "",
      });
      let sitenum = this.siteNo || "000002";
      if (num != "" && spot != "") {
        this.$http
          .get(`/redis/historyOne/${sitenum}/${num}/${spot}/360`)
          .then((res) => {
            if (res.data.h.code == 0) {
              let timelist = res.data.b.time.reverse();
              let datalist = res.data.b.data.reverse();
              let timer =
                timelist[0] + "~" + timelist[timelist.length - 1].substring(10);
              this.tempNum = datalist[0]; //取最新数据
              this.$(".product .time").text(timer); //显示通道
              this.$(".channt .b1").text(num); //显示通道
              this.$(".channt .b2").text(spot); //显示点
              this.$(".channt .b3").text(this.tempNum + "℃"); //显示温度
              this.$chart.setOption(this.option);
              this.$chart.setOption({
                xAxis: [
                  {
                    data: timelist,
                  },
                ],
                series: [
                  {
                    data: datalist,
                  },
                ],
              });
            }
          });
      }
    },
    //通道点计算
    onNumber: function (i, d) {
      var num = 0;
      if (i >= 1 && i < 31) {
        num = (i - 1) * 16 + d;
      } else if (i >= 31 && i < 51) {
        num = 480 + (i - 31) * 8 + d;
      } else if (i >= 51 && i < 57) {
        num = 640 + (i - 51) * 18 + d;
      }
      return num;
    },
    //站点区域字典
    onZone: function (val) {
      // let self = this;
      var str = parseInt(val);
      if (val > 0 && val < 29) {
        str = "电池仓" + val;
      } else if (val == 29) {
        str = "旧仓";
      } else if (val == 30) {
        str = "新仓";
      } else if (val > 30 && val < 51) {
        str = "充电柜" + val;
      } else if (val > 50 && val < 57) {
        str = "线槽" + val;
      }
      return str;
    },
    //告警等级
    onFaultLeve: function (num, val) {
      let self = this;
      var leve = "";
      var data = num < 31 ? self.houseList : self.chestList; //因二级和三级阈值一样
      for (let item in data) {
        var list = data[item];
        if (val >= list.num) {
          leve = list.name;
        }
      }
      return leve;
    },
    //超过阈值温度点闪烁
    onTwinkle: function (obj, str) {
      let self = this;
      var falg = false;
      self.intervalList[str] = setInterval(function () {
        obj.material = falg ? self.materialTwinkle2 : self.materialTwinkle3;
        falg = !falg;
      }, 50);
    },
    // 窗口变动触发的方法
    onWindowResize: function () {
      let self = this;
      self.selectObject = null;
      self.camera.aspect = window.innerWidth / window.innerHeight;
      self.camera.updateProjectionMatrix();
      self.renderer.setSize(window.innerWidth, window.innerHeight);
    },
    // 键盘按下触发的方法
    onKeyDown: function (event) {
      let self = this;
      switch (event.keyCode) {
        case 13:
          self.initCamera();
          self.initControls();
          break;
      }
    },
    /// 获取 raycaster 和所有模型相交的数组，其中的元素按照距离排序，越近的越靠前
    onMouseDblclick: function (event) {
      let self = this;
      var intersects = self.getIntersects(event);
      // 获取选中最近的 Mesh 对象
      if (
        intersects.length !== 0 &&
        intersects[0].object instanceof THREE.Mesh &&
        (intersects[0].object.geometry.type == "SphereGeometry" ||
          intersects[0].object.geometry.type == "CylinderGeometry")
      ) {
        self.selectObject = intersects[0].object;
        self.changeMaterial(self.selectObject);
        self.onEchartData(
          self.selectObject.passageway,
          self.selectObject.index
        ); //通道,测温点
        this.$(".channt .b1").text(self.onZone(self.selectObject.passageway)); //显示通道
        this.$(".channt .b2").text(self.selectObject.index); //显示点
        this.$(".channt .b3").text(self.selectObject.tempNum + "℃"); //显示温度
        // var x = event.clientX - 200;
        // var y = event.clientY - 500;
        // this.$(".label").css({
        // 	left: x + "px",
        // 	top: y + "px",
        // });
      } else {
        self.selectObject = null;
        //判断是否存储上一次选中点的材质,true:还原上一次点的材质
        if (self.lastObject.flag == true) {
          self.lastObject.flag = false;
          var obj = self.scene.getObjectByName(self.lastObject.name);
          obj.material = self.lastObject.material;
        }
        this.$(".label").css({
          display: "none",
        });
      }
    },
    // 获取与射线相交的对象数组
    getIntersects: function (event) {
      let self = this;
      event.preventDefault();
      //div内的canvas
      var width = 0;
      var height = 0;
      if (self.$("#heatchart").get(0)) {
        width = parseInt(this.$("#heatchart").get(0).offsetWidth);
        height = parseInt(self.$("#heatchart").get(0).offsetHeight);
      }

      // e.target获取的canvas对象
      let obj = event.target;
      let objSet = obj.getBoundingClientRect();

      let x = ((event.clientX - objSet.left) / width) * 2 - 1; // 标准设备横坐标
      let y = -((event.clientY - objSet.top) / height) * 2 + 1; // 标准设备纵坐标

      let standardVector = new THREE.Vector3(x, y, 1); // 标准设备坐标
      //  标准设备坐标转世界坐标
      let worldVector = standardVector.unproject(self.camera);
      // 射线投射方向单位向量(worldVector坐标减相机位置坐标)
      let ray = worldVector.sub(self.camera.position).normalize();
      // 创建射线投射器对象
      let rayCaster = new THREE.Raycaster(self.camera.position, ray);

      // 返回射线选中的对象 第二个参数如果不填 默认是false
      let intersects = rayCaster.intersectObjects(self.scene.children, true);

      //返回选中的对象
      return intersects;
    },
    // 改变对象材质属性
    changeMaterial: function (object) {
      let self = this;
      //判断是否存储上一次选中点的材质,true:还原上一次点的材质
      if (self.lastObject.flag == true) {
        var obj = self.scene.getObjectByName(self.lastObject.name);
        obj.material = self.lastObject.material;
      }
      //存储当前选中点的材质,便于还原
      self.lastObject.name = object.name;
      self.lastObject.material = object.material;
      self.lastObject.flag = true;
      object.material = self.materialSelect;
    },
    //告警列表信息
    onFaultList: function () {
      // let self = this;
      // var timeBegin = new Date(new Date().getTime() - 2 * 60 * 1000);
      // var timeEnd = new Date();
      // this.$api.post(self.$utils.config.link2, {
      // 		method: self.$utils.config.siteList_method,
      // 		accounts: sessionStorage.getItem('accounts'),
      // 		token: sessionStorage.getItem('token'),
      // 		rolesStr: sessionStorage.getItem('rolesStr'),
      // 		stationList: sessionStorage.getItem("stationList"),
      // 		deviceNo: self.deviceNo,
      // 		publishTimeBegin: self.dateFtt("yyyy-MM-dd hh:mm:ss", timeBegin),
      // 		publishTimeEnd: self.dateFtt("yyyy-MM-dd hh:mm:ss", timeEnd),
      // 		category: '01', //告警分类
      // 		status: 'open', //告警状态
      // 	},
      // 	function(response) {
      // 		var data = response.result.list;
      // 		self.table.dataList = [];
      // 		if (response.success == true && data != undefined) {
      // 			self.faultList = data;
      // 			for (let item in data) {
      // 				var dt = {
      // 					'deviceNo': data[item].stationName,
      // 					'tempDot': data[item].position + "(" + data[item].dot + ")",
      // 					'faultNum': data[item].highTemp + '℃',
      // 					'faultLeve': data[item].level + ' 级',
      // 				};
      // 				self.table.dataList.push(dt);
      // 			}
      // 			self.$store.commit('onTableFormList', {
      // 				list: self.table
      // 			})
      // 		}
      // 	});
    },
    dateFtt: function (fmt, date) {
      var o = {
        "M+": date.getMonth() + 1, //月份
        "d+": date.getDate(), //日
        "h+": date.getHours(), //小时
        "m+": date.getMinutes(), //分
        "s+": date.getSeconds(), //秒
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
        S: date.getMilliseconds(), //毫秒
      };
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
      return fmt;
    },
  },
  mounted() {
    this.getsitelist();
    this.initbox();
    let self = this;
    // //表单数据
    // self.stationInfo = self.stationList;

    // if (self.userStationInfo.deviceNo) {
    // 	self.deviceNo = self.userStationInfo.deviceNo;
    // } else if (self.stationInfo.length > 0) {
    // 	self.deviceNo = self.stationInfo[0].deviceNo;
    // 	self.$store.commit('onUserStationInfo', {
    // 		list: self.stationInfo[0]
    // 	})
    // }
    // self.$store.commit('onTableFormList', {
    // 	list: self.table
    // })
    //模型组合
    self.geometryModel = new THREE.Geometry();
    //通道模型组添加到场景
    self.groupModel = new THREE.Group();
    //测温点模型组添加到场景
    self.groupTempDot = new THREE.Group();

    //默认材质
    self.material = new THREE.MeshBasicMaterial({
      color: 0x2bff2b,
    });
    self.material1 = new THREE.MeshBasicMaterial({
      color: 0x03d7db,
    });
    //设置当前选中点的材质
    self.materialSelect = new THREE.MeshLambertMaterial({
      color: 0xa52a2a,
      transparent: false,
      opacity: 1,
    });
    self.materialStaioncustom = new THREE.MeshLambertMaterial({
      color: 0xc0c0c0,
      transparent: true,
      opacity: 1,
    });
    //闪烁点切换
    self.materialTwinkle2 = new THREE.MeshLambertMaterial({
      color: 0xff0000, // 红色
      shading: THREE.FlatShading,
      transparent: false,
    });
    self.materialTwinkle3 = new THREE.MeshLambertMaterial({
      color: 0xff8c00, // 黄色
      shading: THREE.FlatShading,
      transparent: false,
    });

    //电池仓
    self.materialStaion = new THREE.MeshBasicMaterial({
      color: 0xc0c0c0,
    });

    //圆柱通道点
    var cylinderGeometry = new THREE.CylinderGeometry(5, 5, 20, 32, 3);
    self.cylinderMesh = new THREE.Mesh(cylinderGeometry, self.material);

    self.onTempList();
    self.onRegionMaxTemp();
    self.onFaultList();

    self.intervelTime = setInterval(function () {
      self.onTempList();
      self.onRegionMaxTemp();
      self.onFaultList();
    }, 1000 * 60 * 3);
    //鼠标按下事件
  },
  updated() {},
  computed: {
    listenshowpage1() {
      return this.$store.state.message;
    },
    siteNo: {
      get() {
        return this.$store.state.sitenum;
      },
      set(siteNo) {
        this.$store.state.sitenum = siteNo;
      },
    },
  },
  watch: {
    stationID: function (newValue) {
      let self = this;
      if (newValue.length == 0) {
        self.staList = [];
        self.select = {
          province: "",
          city: "",
          area: "",
        };
        self.deviceNo = "";
      } else {
        var le = this.$.grep(self.stationList, function (n) {
          return (
            n.deviceNo.toLowerCase().includes(self.stationID) ||
            n.stationName.toLowerCase().includes(self.stationID)
          );
        });
        self.staList = le;
      }
    },
    listenshowpage1: function (newval, oldval) {
      if (newval.warntitle == "温度告警") {
        this.gettable();
      }
    },
  },
  //销毁完成状态
  beforeDestroy() {
    let self = this;
    self.activity = false; //页面是否活动,是否循环渲染renderScene
    self.clearCache(self.meshGroupList);
    self.clearRenderer();

    window.clearInterval(self.intervelTime);

    // 递归遍历组对象group释放所有后代网格模型绑定几何体占用内存
    self.groupModel.traverse(function (item) {
      if (item instanceof THREE.Mesh) {
        item.geometry.dispose(); //删除几何体
        item.material.dispose(); //删除材质
      }
    });
    self.groupTempDot.traverse(function (item) {
      if (item instanceof THREE.Mesh) {
        item.geometry.dispose(); //删除几何体
        item.material.dispose(); //删除材质
      }
    });
    // 删除场景对象scene的子对象group
    self.scene.remove(self.groupModel, self.groupTempDot);
    console.log("清空渲染器缓存");
  },
};
</script>
<style scoped>
.bar_box {
  position: relative;
  padding-left: 22px;
  padding-right: 22px;
  padding-top: 20px;
  box-sizing: border-box;
  margin-top: 20px;
  height: 196px;
  background: url("../../assets/img/back12.png") no-repeat;
  background-size: 100% 100%;
}
.select_box {
  box-sizing: border-box;
  overflow: hidden;
}
.search .el-input {
  float: left;
  width: 120px;
  margin-right: 10px;
}
.el-tabs__nav-wrap .is-scrollable .is-top {
  overflow: auto !important;
}
.el-tabs {
  margin-top: 20px;
}
.el-tabs__header {
  margin: 0 !important;
}
.el-tabs /deep/ .el-tabs__active-bar {
  background-color: transparent !important;
  height: 0 !important;
}
.el-tabs /deep/.el-tabs__item {
  padding: 0 20px !important;
  text-align: center;
  margin-right: 10px;
  color: #fff;
  height: 32px;
  line-height: 32px;
  border: 1px solid rgba(19, 81, 156, 1);
  background: #043266;
  border-radius: 5px;
}
.el-tabs /deep/.el-tabs__item.is-active {
  color: rgba(0, 255, 255, 1);
  border: 1px solid rgba(19, 81, 156, 1);
}
.el-tabs >>> .el-tabs__nav-wrap::after {
  height: 0 !important;
}
.heatchart {
  height: 700px;
  position: relative;
  border: 1px solid #13519c;
  margin: 0 20px;
  margin-top: 20px;
  z-index: 2;
}
.heatchart .label {
  position: absolute;
  right: 20px;
  top: 20px;
  border: 1px solid #13519c;
  box-sizing: border-box;
  border-radius: 5px;
  background: transparent;
  z-index: 3;
  color: #fff;
}

.product {
  padding-top: 10px;
  box-sizing: border-box;
}
.product .txt {
  float: left;
  margin-left: 20px;
  font-size: 16px;
  font-family: "PingFang SC";
  font-weight: 700;
}
.product .time {
  font-size: 14px;
  float: right;
  margin-right: 20px;
}
.channt {
  margin-top: 10px;
  float: right;
  margin-right: 20px;
}
.echart {
  margin-top: 30px;
  height: 200px;
  width: 400px;
}
.heatchart /deep/ canvas {
  z-index: 3 !important;
}
</style>